import React, { Component } from 'react';
import { Toast } from 'antd-mobile';
import Axios from 'axios';
import './login.scss';
export default class Wode extends Component{
  constructor(props) {
    super(props);
     this.state = {
       username: "",
       password: ""
     }
    this.gologin = this.gologin.bind(this);
    this.gomongodb = this.gomongodb.bind(this);
  }
  gologin () {
    this.props.history.push('../register');
  }
  changeuserName(e) {
    // console.log(e.target.value);
    this.setState({
      username: e.target.value
    })
  }
  changepassword(e) {
    // console.log(e.target.value);
    this.setState({
      password: e.target.value
    })
  }
  gomongodb () {
    Axios.post("/api/user/login", { username: this.state.username, password: this.state.password }).then((res) => {
        console.log(res);
       Toast.success(res.data.msg, 1);
       if (res.data.msg === "登录成功") {
        //  this.props.history.replace({
        //    pathname: "/woDe",
        //    username: this.state.username
        //   });
         this.props.history.replace("/woDe");
       }
        })
  }
  goBack () {
    this.props.history.go(-1);
  }
    render () {
        return (
            <div className="login">
              <div className="lx-head">
              <i className="iconfont icon-left-angle" onClick={this.goBack.bind(this)}></i>
                  <span>登录</span>
                  <span className="lxheadright" onClick={this.gologin}>注册</span>
            </div>
             <div className="formtext" autoComplete="off">
                    <h3>使用聚美帐号登录</h3>
                    <div>
                        <input type="text" className="login_input" name="mobile" placeholder="已注册的手机号/邮箱／用户名" maxLength="11" id="account" value={this.state.username} onChange={this.changeuserName.bind(this)}/>
                    </div>
                    <div>
                        <input type="password" className="login_input" name="password" placeholder="6-16位登陆密码" maxLength="16" autoComplete="new-password" value={this.state.password} onChange={this.changepassword.bind(this)}/>
                    </div>
                    <div>
                        <button onClick={this.gomongodb}>登录</button>
                    </div>
                </div>
            </div>
        )
    }
}
